<template>
  <div class="login_box_father">
    <div class="login_box_son">
      <el-dialog
        title="提示"
        :visible="checkStatus"
        width="30%"
        :before-close="handleClose"
      >
        <span>用户名或密码错误</span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="checkStatus = false">重新登陆</el-button>
        </span>
      </el-dialog>
      <el-row>
        <el-col :span="9">&nbsp;</el-col>
        <el-col :span="6">
          <selectCard></selectCard>
          <el-form
            :model="numberValidateForm"
            ref="numberValidateForm"
            label-width="100px"
            class="demo-ruleForm"
          >
            <el-form-item
              label="用户名"
              prop="userName"
              :rules="[{ required: true, message: '用户名不能为空' }]"
            >
              <el-input
                type="userName"
                v-model.number="numberValidateForm.userName"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item
              label="密码"
              prop="password"
              :rules="[{ required: true, message: '密码不能为空' }]"
            >
              <el-input
                type="password"
                v-model.number="numberValidateForm.password"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button
                type="primary"
                @click="submitForm('numberValidateForm')"
                >提交</el-button
              >
              <el-button @click="resetForm('numberValidateForm')"
                >重置</el-button
              >
            </el-form-item>
          </el-form></el-col
        >
        <el-col :span="9">&nbsp;</el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import selectCard from "@/components/selectCard";
export default {
  name: "HelloWorld",
  data() {
    return {
      numberValidateForm: {
        password: "",
        userName: ""
      },
      msg: "",
      checkStatus: false
    };
  },
  components: {
    selectCard: selectCard
  },
  methods: {
    submitForm(formName) {
      //$refs获取DOM元素
      //validate方法:DOM对象如果通过了校验规则,则执行validate方法,此方法返回的调用函数callback(valid),可以使用箭头函数获取valid值并且使用
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.$axios({
            method: "post",
            url: "http://127.0.0.1:8000/login/",
            data: {
              //这里是发送给后台的数据
              username: this.numberValidateForm.username,
              password: this.numberValidateForm.password
            }
          })
            .then(response => {
              var data = response.data;
              if (data.msg == "登陆成功") {
                localStorage.setItem("token", JSON.stringify(data.data.token));
                // 跳转
                this.$router.push({ name: "search" ,params: { activeIndex: "4" }});
              } else {
                changeInfo(data.msg);
                this.checkStatus = true;
              }
            })
            .catch(error => {
              this.msg = msg;
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then(_ => {
          done();
        })
        .catch(_ => {});
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.login_box_father {
  padding-top: 10%;
  padding-left:0;
  margin:0;
  height:100vh;
  background-image: url("./../../static/user.png");
}
</style>
